<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body style="background-color: #f7f7f7" onload="showvalf()">
<div class="header">
    <div class="back" onclick="javascript:history.back(-1);">
        <span></span>
    </div>
    结算
</div>
<div class="content">
    <div class="acount-wrapper">
        <div class="left"></div>
        <h2 class="accounts-title">本次充电消费</h2>
        <div class="right"></div>
    </div>
    <h1 id="mytime"><span id="time2">¥</span><span id="time1">0</span></h1>
    <P class="time-accounts">累计充电时间：<span id="times">23</span>分钟</P>
    <p class="time-bottom">关闭后,请重置密码</p>
</div>
<div class="time-button" id="show">确认支付</div>
<div id="errormsg" style="display: none"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" >
    var thisURL = document.URL;
    var getval =thisURL.split('?')[1];
    var showval= getval.split("=")[1];
    function  showvalf(){
        if(showval==0){
            document.getElementById('times').innerText= 1;
        }else {
            document.getElementById('times').innerText= showval;
        }
        if(showval >= 0 && showval <= 20) {
            document.getElementById('time1').innerText= 1;
        }else {
            document.getElementById('time1').innerText= showval/20;
        }
    }
</script>
<script>
    $("document").ready(function()
    {
        //点击弹出浮层
        $("#show").click(function()
        {
            if($.cookie("COOKIE_MONEY")){
                var money = $("#time1").text();
                var newMoney = parseInt($.cookie("COOKIE_MONEY"))-parseInt(money);
                $.cookie("COOKIE_MONEY", newMoney, { path: '/', expires: 10 });
                //清除之前的样式
                $("#fullScreen,#floatLayer").remove();
                $("body").append
                (
                    //占据整个屏幕Div
                    "<div id='fullScreen'></div>"+
                    //浮层区
                    "<div id='floatLayer'>" +
                    "<p id='mainText' >你已成功支付"+money+"元!钱包余额"+newMoney+"元</p>"+
                    "<a id='confirm' href='index.html'>确认</a>"+
                    "</div>"
                );
                //隐藏浮层
                $("#confirm").click(function()
                {
                    $("#fullScreen,#floatLayer").remove();
                });
            }else {
                $("#errormsg").css({"display":"block"});
                $("#errormsg").html("请先充值！").fadeIn(300).delay(2000).fadeOut(300);
            }
        });
    });
</script>
</html>